<template>
  <div class="scrollable-form">
    <div class="form-wrapper">
      <el-form
        ref="formData"
        :model="formData"
        label-position="left"
        label-width="80px"
        size="medium"
      >
        <!-- 第一行 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="中文名"
              :label-width="width"
              class="form-item"
              prop="wzm"
            >
              <el-input v-model="formData.wzm" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="拉丁名" :label-width="width" class="form-item">
              <el-input v-model="formData.ldm" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="观测者" :label-width="width" class="form-item">
              <el-input v-model="formData.guance" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第二行 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="实体数量"
              :label-width="width"
              class="form-item"
            >
              <el-input v-model="formData.shitishuliang" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="痕迹种类及数量"
              :label-width="width"
              class="form-item"
            >
              <el-input v-model="formData.henjishuliang" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经度" :label-width="width" class="form-item">
              <el-input v-model="formData.jd" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第三行 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="维度" :label-width="width" class="form-item">
              <el-input v-model="formData.wd" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="海拔" :label-width="width" class="form-item">
              <el-input v-model="formData.hb" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="坡度" :label-width="width" class="form-item">
              <el-input v-model="formData.podu" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第四行 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="坡位" :label-width="width" class="form-item">
              <el-input v-model="formData.powei" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="坡向" :label-width="width" class="form-item">
              <el-input v-model="formData.poxiang" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="栖息地类型"
              :label-width="width"
              class="form-item"
            >
              <el-input v-model="formData.qixi" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第五行 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="调查日期及发现时间"
              :label-width="width"
              class="form-item"
            >
              <el-date-picker
                v-model="formData.diaochariqi"
                type="datetime"
                placeholder="选择日期和时间"
                style="width: 100%"
                :clearable="false"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="栖息地干扰"
              :label-width="width"
              class="form-item"
            >
              <el-input v-model="formData.qixiganrao" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="保护等级"
              :label-width="width"
              class="form-item"
            >
              <el-select
                v-model="formData.protectlevel"
                placeholder="请选择"
                style="width: 100%"
                @change="handleOptionChange1"
              >
                <el-option
                  v-for="list in list1"
                  :key="list.value"
                  :label="list.label"
                  :value="list.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第六行 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="发现地址"
              :label-width="width"
              class="form-item"
            >
              <el-input v-model="formData.location" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="盟市" :label-width="width" class="form-item">
              <el-input v-model="formData.mengshi" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="旗县" :label-width="width" class="form-item">
              <el-input v-model="formData.qixian" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第七行 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="数据来源"
              :label-width="width"
              class="form-item"
            >
              <el-input v-model="formData.source" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 特征描述单独一行 -->
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item
              label="特征描述"
              :label-width="width"
              class="form-item"
            >
              <el-input
                v-model="formData.tezhengmiaoshu"
                type="textarea"
                :rows="4"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 分布多度描述单独一行 -->
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item
              label="分布多度描述"
              :label-width="width"
              class="form-item"
            >
              <el-input
                v-model="formData.fenbuduodumiaoshu"
                type="textarea"
                :rows="4"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item
              label="照片编号"
              :label-width="width"
              class="form-item"
            >
              <div class="jdt">
                <file-upload
                  v-if="isDataLoaded"
                  :upload-api-url="uploadApiUrl"
                  :url="formData.zpbh"
                  @upload-success="handleUploadSuccess"
                  @delete-image="handleDeleteImage"
                />
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item
              label="生境照片编号"
              :label-width="width"
              class="form-item"
            >
              <div class="jdt">
                <file-upload
                  v-if="isDataLoaded"
                  :upload-api-url="uploadApiUrl"
                  :url="formData.sjzpbh"
                  @upload-success="handleUploadSuccess1"
                  @delete-image="handleDeleteImage1"
                />
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="btn" style="text-align: center">
      <el-button style="margin-right: 8px" @click="goBack">返回</el-button>
      <el-button
        type="danger"
        style="background-color: #1890ff; border-color: #1890ff"
        @click="onSubmit"
        >{{ this.button }}</el-button
      >
    </div>
  </div>
</template>

<script>
import FileUpload from "@/components/common/AnimalUpload/index.vue";
export default {
  name: "BirdAdd",
  components: {
    FileUpload,
  },
  data() {
    return {
      button: "新增数据",
      width: "140px",
      isFormValid: false,
      isDataLoaded: false,
      uploadApiUrl: "http://49.232.236.127/stjc/rest/uploadpic",
      formData: {
        wzm: null,
        ldm: null,
        shitishuliang: null,
        henjishuliang: null,
        jd: null,
        wd: null,
        hb: null,
        id: null,
        podu: null,
        powei: null,
        poxiang: null,
        qixi: null,
        diaochariqi: null,
        qixiganrao: null,
        protectlevel: null,
        location: null,
        mengshi: null,
        qixian: null,
        source: null,
        guance: null,
        zpbh: null,
        sjzpbh: null,
        tezhengmiaoshu: null,
        fenbuduodumiaoshu: null,
        category: "02",
      },
      plantList: [],
      list1: [
        { label: "一级", value: "01" },
        { label: "二级", value: "02" },
        { label: "未列入", value: "03" },
      ],
    };
  },
  mounted() {
    if (!this.$route.query.data) {
      this.button = "新增数据";
      this.isDataLoaded = true;
    } else {
      const routeParams = JSON.parse(this.$route.query.data);
      this.formData = routeParams;
      this.button = "修改数据";
      this.isDataLoaded = true;
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    onSubmit() {
      if (!this.formData.wzm) {
        this.$message.error("中文名不能为空");
        return;
      }
      console.log("submit!", this.formData);
      this.plantList.push(this.formData);
      if (this.button === "新增数据") {
        console.log("数据", this.plantList);
        this.$api
          .addPantData(this.plantList)
          .then((res) => {
            console.log("新增成功", res);
            this.$message.success("新增成功");
            this.$store.dispatch("animal/fetchAnimalData");
            this.goBack();
          })
          .catch((error) => {
            console.error("新增失败", error);
          });
      } else if (this.button === "修改数据") {
        console.log("修改图片", this.formData.zpcpath);
        console.log("点击了修改");
        this.$api
          .updatePlantData(this.formData)
          .then((res) => {
            console.log("修改成功", res);
            this.$message.success("修改成功");
            this.$store.dispatch("animal/fetchAnimalData");
            this.goBack();
          })
          .catch((error) => {
            console.error("修改失败", error);
          });
      }
    },
    handleUploadSuccess(uploadInfo) {
      console.log("111", uploadInfo);
      this.formData.zpbh = this.formData.zpbh
        ? `${this.formData.zpbh},${uploadInfo.fileName}`
        : uploadInfo.fileName;
      this.formData.zpbh = this.formData.zpbh.replace(/,+$/, "");
    },
    handleUploadSuccess1(uploadInfo) {
      console.log("111", uploadInfo);
      this.formData.sjzpbh = this.formData.sjzpbh
        ? `${this.formData.zpbh},${uploadInfo.fileName}`
        : uploadInfo.fileName;
      this.formData.sjzpbh = this.formData.sjzpbh.replace(/,+$/, "");
    },
    handleDeleteImage(payload) {
      console.log(payload);
      const { fileName } = payload;
      if (this.formData) {
        if (this.formData.zpbh) {
          const fileNames = this.formData.zpbh.split(",");
          const updatedFileNames = fileNames.filter(
            (name) => name !== fileName
          );
          this.formData.zpbh = updatedFileNames.join(",");
        }
        this.formData.zpbh = this.formData.zpbh.replace(/,+$/, "");
      }
    },
    handleDeleteImage1(payload) {
      console.log(payload);
      const { fileName } = payload;
      if (this.formData) {
        if (this.formData.sjzpbh) {
          const fileNames = this.formData.sjzpbh.split(",");
          const updatedFileNames = fileNames.filter(
            (name) => name !== fileName
          );
          this.formData.sjzpbh = updatedFileNames.join(",");
        }
        this.formData.sjzpbh = this.formData.sjzpbh.replace(/,+$/, "");
      }
    },
    handleOptionChange1() {
      switch (this.formData.protectlevel) {
        case "一级":
          this.formData.protectlevel = "一级";
          break;
        case "二级":
          this.formData.protectlevel = "二级";
          break;
        case "未列入":
          this.formData.protectlevel = "未列入";
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style scoped>
.scrollable-form {
  display: flex;
  flex-direction: column;
  height: 90vh;
}
.form-wrapper {
  flex: 1;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 20px;
  border-bottom: none;
}
.form-item {
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #fafafa;
}
.label {
  font-weight: bold;
  text-align: left;
}
.el-input {
  width: 100%;
}
.btn {
  padding: 20px;
  border-top: 1px solid #ccc;
  position: sticky;
  bottom: 0;
  background-color: #fff;
}
.jdt {
  overflow: hidden;
  display: inline-block;
  width: 100%;
  text-align: start;
  vertical-align: top;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  font-feature-settings: "tnum";
  position: relative;
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}
</style>
